<div class="row animate fadeIn">
  <!-- <div class="ibox-title" style="border:none;"><h5 style="color: #00afef"><i></i></h5>
      <div class="ibox-tools">
          <button  id="sads" class="btn btn-sm btn-primary save-btn-tab">Save</button>
          <a id = "cancel_add" class="btn btn-sm btn-outline btn-info cancel-btn-tab">Cancel</a>
      </div>
  </div> -->
  <div class="ibox-content no-top-border">
      <form id="flexform" method="POST" class="wizard-big">
          <h1>Sequence</h1>
          <fieldset>
              <div class="row">
                  <div class="col-lg-8">
                      <div class="form-group">
                          <label>Table Name *</label>
                          <select id="table_names" name="table_name" class="form-control chosen" required>
                          </select>
                      <div class="form-group">
                          <label>Field Name *</label>
                          <select id="table_col" name="table_col" class="form-control chosen" required>
                            <option value=""></option>
                          </select>
                      </div>
                      <div class="form-group">
                          <label>Separator</label>
                          <input name="separator" type="text" class="form-control">
                      </div>
                  </div>
              </div>

          </fieldset>
          <h1>Sequence Segment</h1>
          <fieldset>
              <div class="row">
                  <div class="col-lg-6">
                      <div class="form-group">
                          <label>Sequence Segment</label>
                          <input id="name" name="name" type="text" class="form-control" required">
                      </div>
                      <div class="form-group">
                          <label>Segment Length *</label>
                          <input id="surname" name="surname" type="text" class="form-control" required">
                      </div>
                  </div>
                  <div class="col-lg-6">
                      <div class="form-group">
                          <label>Email *</label>
                          <input id="email" name="email" type="text" class="form-control" required email">
                      </div>
                      <div class="form-group">
                          <label>Address *</label>
                          <input id="address" name="address" type="text" class="form-control">
                      </div>
                  </div>
              </div>
          </fieldset>
      </form>
  </div>
</div>
      <script>
            $(document).ready(function(){
            $.ajax({
              type: "POST",
              url: "<?php echo base_url($this->session->userdata('forajax') . '/get_tables'); ?>",
              dataType: 'json',
              success: function(e) {
                 var tmp = '';
                 tmp += '<option value="">--</option>';
                 $.each(e, function(i, item){
                    tmp += '<option value="'+e[i].Tables_in_<?php echo $this->db->database; ?> +'">'+e[i].Tables_in_<?php echo $this->db->database; ?> +'</option>';
                 });
                 $('#flexform #table_names').html(tmp);
                 $('select').trigger('chosen:updated');
              },
              error: function() {
              },
              complete: function() {
              },
              beforeSend: function(){
              }
            });

            $(document).on('change','#flexform #table_names',function(){
             $.ajax({
                type: "POST",
                url: "<?php echo base_url($this->session->userdata('forajax') . '/get_table_col'); ?>",
                dataType: 'json',
                data: {"table_name" : $(this).val() },
                success: function(e) {
                   var tmp = '';
                   tmp += '<option value="">--</option>';
                   $.each(e, function(i, item){
                      tmp += '<option value="'+e[i].Field +'">'+e[i].Field +'</option>';
                   });
                   $('#flexform #table_col').html(tmp);
                   $('select').trigger('chosen:updated');
                },
                error: function() {
                },
                complete: function() {
                },
                beforeSend: function(){
                }
              });
            });
             $("#flexform").steps({
                    bodyTag: "fieldset",
                    onStepChanging: function (event, currentIndex, newIndex)
                    {
                        // Always allow going backward even if the current step contains invalid fields!
                        if (currentIndex > newIndex)
                        {
                            return true;
                        }

                        // Forbid suppressing "Warning" step if the user is to young
                        if (newIndex === 3 && Number($("#age").val()) < 18)
                        {
                            return false;
                        }

                        var form = $(this);

                        // Clean up if user went backward before
                        if (currentIndex < newIndex)
                        {
                            // To remove error styles
                            $(".body:eq(" + newIndex + ") label.error", form).remove();
                            $(".body:eq(" + newIndex + ") .error", form).removeClass("error");
                        }

                        // Disable validation on fields that are disabled or hidden.
                        form.validate().settings.ignore = ":disabled,:hidden";

                        // Start validation; Prevent going forward if false
                        return form.valid();
                    },
                    onStepChanged: function (event, currentIndex, priorIndex)
                    {
                        // Suppress (skip) "Warning" step if the user is old enough.
                        if (currentIndex === 2 && Number($("#age").val()) >= 18)
                        {
                            $(this).steps("next");
                        }

                        // Suppress (skip) "Warning" step if the user is old enough and wants to the previous step.
                        if (currentIndex === 2 && priorIndex === 3)
                        {
                            $(this).steps("previous");
                        }
                    },
                    onFinishing: function (event, currentIndex)
                    {
                        var form = $(this);

                        // Disable validation on fields that are disabled.
                        // At this point it's recommended to do an overall check (mean ignoring only disabled fields)
                        form.validate().settings.ignore = ":disabled";

                        // Start validation; Prevent form submission if false
                        return form.valid();
                    },
                    onFinished: function (event, currentIndex)
                    {
                        var form = $(this);

                        // Submit form input
                        form.submit();
                    },
                    onCanceled: function (event)
                    { 
                      alert('Canceled');
                    }
                }).validate({
                      errorPlacement: function (error, element)
                    {
                        element.before(error);
                    },
                    rules: {
                        confirm: {
                            equalTo: "#password"
                        }
                    }
                });

              $('.chosen').chosen({width: "100%"});

              $('.i-checks').iCheck({
                    checkboxClass: 'icheckbox_square-green',
                    radioClass: 'iradio_square-green',
              });


              $('#cancel_add').click(function () {
                  swal({
                    title: "Are you sure?",
                    text: "Your work will not be save",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Leave",
                    cancelButtonText: "Stay",
                    closeOnConfirm: true,
                    closeOnCancel: true },
                function (isConfirm) {
                    if (isConfirm) {
                      swal("success");
                        close_add(); active_search();
                        notifymsg("hide","hide");
                    } else {
                        swal("Cancelled");
                    }
                });
              });

        });

        $('#addX').click(function(){
            close_add();
        });
</script>